<template>
	<div class="page1-centet">
		<div class="echart-show" ref="chart"></div>
		<!-- 数据统计面板 -->
		
	</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: "padPage1Centet",
	props: {
		companiesData: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	data() {
		return {
			chart: null,
			autoTooltipTimer: null,
			currentTooltipIndex: 0,
			isAutoTooltipRunning: false,
			isUserHovering: false,
			iconMapPath: require('../../images/icon-map.png'),
			jilinMapData: {
				"type": "FeatureCollection",
				"features": [{
					"type": "Feature",
					"properties": {
						"name": "吉林省",
						"adcode": "220000"
					},
					"geometry": {
						"type": "Polygon",
						"coordinates": [[
							[0, 0],  
							[1300, 0],  // 右下角
							[1300, 728],  // 右上角
							[0, 728],  // 左上角
							[0, 0]   // 闭合长方形，回到起点
						]]
					}
				}]
			}
		}
	},
	mounted() {
		// this.initChart();
	},
	beforeDestroy() {
		// 清理图表实例
		if (this.chart) {
			this.chart.dispose();
		}
		// 不再需要清理动画定时器
		// 清理自动tooltip定时器
		this.stopAutoTooltip();
	},
	methods: {
		initChart() {
			this.$nextTick(() => {
				this.buildChart();
			});
		},
		buildChart() {
			// 注册地图
			echarts.registerMap('jilin', this.jilinMapData);
			
			this.chart = echarts.init(this.$refs.chart);
			
			// 生成飞线数据
			const lines = this.generateLines();
			
			const option = {
				backgroundColor: 'rgba(0, 0, 0, 0)',
				tooltip: {
					trigger: 'item',
					backgroundColor: 'rgba(0, 30, 60, 0.95)',
					borderColor: '#00ffff',
					borderWidth: 2,
					borderRadius: 8,
					textStyle: {
						color: '#ffffff',
						fontSize: 14,
						fontWeight: 'normal'
					},
					padding: [15, 20],
					boxShadow: '0 0 25px rgba(0, 255, 255, 0.6)',
					formatter: (params) => {
						// 只对主要节点系列（seriesIndex === 1）显示tooltip
						if (params.componentSubType === 'effectScatter' && params.seriesIndex === 1) {
							const company = params.data.companyData;
							
							if (company) {
								return `
									<div style="
										border-radius: 8px;
										padding: 5px;
										min-width: 200px;
									">
										<div style="
											background: linear-gradient(90deg, #00ffff, #66ccff, #00ffff);
											-webkit-background-clip: text;
											-webkit-text-fill-color: transparent;
											background-clip: text;
											font-size: 16px;
											font-weight: bold;
											text-align: center;
											margin-bottom: 15px;
											padding: 8px;
											border-bottom: 2px solid rgba(0, 255, 255, 0.4);
										">${company.name}</div>
										<div style="font-size: 13px; line-height: 1.6;">
											<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
												<span style="color: #ffffff;">管网长度：</span>
												<span style="color: #00ffff; font-weight: bold;">${company.pipelineLength} <span style="color: #99ccff;">km</span></span>
											</div>
											<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
												<span style="color: #ffffff;">调压设施：</span>
												<span style="color: #00ffff; font-weight: bold;">${company.regulatingFacilities} <span style="color: #99ccff;">个</span></span>
											</div>
											<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
												<span style="color: #ffffff;">年销气总量：</span>
												<span style="color: #00ffff; font-weight: bold;">${company.annualGasSales} <span style="color: #99ccff;">万m³</span></span>
											</div>
											<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
												<span style="color: #ffffff;">场站数量：</span>
												<span style="color: #00ffff; font-weight: bold;">${company.stationCount} <span style="color: #99ccff;">个</span></span>
											</div>
											<div style="display: flex; justify-content: space-between;">
												<span style="color: #ffffff;">用户数量：</span>
												<span style="color: #00ffff; font-weight: bold;">${company.userCount.toLocaleString()} <span style="color: #99ccff;">户</span></span>
											</div>
										</div>
									</div>
								`;
							}
						}
						return false; // 不显示tooltip
					}
				},
				geo: {
					map: 'jilin',
					roam: false,
					aspectScale: 1,
					layoutCenter: ['50%', '50%'],
					layoutSize: '178%',
					silent: true,  // 禁用地图的所有交互事件
					itemStyle: {
						normal: {
							areaColor: 'rgba(0, 100, 200, 0)',
							borderColor: '#00ffffff',
							borderWidth: 0,
							shadowColor: '#00ffffff',
							// shadowBlur: 25
						}
					},
					emphasis: {
						itemStyle: {
							// areaColor: 'rgba(0, 150, 255, 0.2)'
						}
					},
					regions: [{
						name: '吉林省',
						itemStyle: {
							// areaColor: 'rgba(0, 100, 200, 0.05)',
							// borderColor: '#00ffff',
							// borderWidth: 3,
							// shadowColor: '#00ffff',
							// shadowBlur: 35
						}
					}]
				},
				series: [
					// 背景光晕效果
					{
						type: 'effectScatter',
						coordinateSystem: 'geo',
						data: this.companiesData.map(item => ({
							name: item.name,
							value: item.coord.concat([item.isCenter ? 100 : 100])
						})),
						symbolSize: function(val, params) {
							return params.data.value[2] / 3;
						},
						itemStyle: {
							color: function(params) {
								return params.data.value[2] > 80 ? 
									'rgba(255, 102, 0, 0)' : 'rgba(0, 255, 255, 0)';
							}
						},
						// rippleEffect: {
						// 	brushType: 'fill',
						// 	scale: 4,
						// 	period: 3
						// },
						hoverAnimation: false,
						silent: true
					},
					// 主要节点
					{
						type: 'effectScatter',
						coordinateSystem: 'geo',
						data: this.companiesData.map(item => ({
							name: item.name,
							value: item.coord.concat([item.isCenter ? 100 : 60]),
							symbolSize: item.isCenter ? 50 : 42,
							itemStyle: {
								color: '#00ffff',  // 统一使用青色
								borderColor: '#44ffff',
								borderWidth: 2,
								shadowColor: '#00ffff',
								shadowBlur: 20
							},
							// 包含完整的公司信息用于tooltip
							companyData: item
						})),
						symbol: 'image://' + this.iconMapPath,
						symbolSize: function(val, params) {
							return params.data.value[2] > 80 ? 25 : 18;
						},
						itemStyle: {
							color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
								{offset: 0, color: '#66ffff'},
								{offset: 0.7, color: '#00ffff'},
								{offset: 1, color: '#0099cc'}
							]), // 统一使用青色渐变
							borderColor: '#44ffff',
							borderWidth: 3,
							shadowColor: '#00ffff',
							shadowBlur: 25
						},
						rippleEffect: {
							brushType: 'stroke',
							scale: 2.5,
							period: 4
						},
						label: {
							show: true,
							position: 'right',
							offset: [10, 0],  // 往右偏移10像素
							formatter: function(params) {
								// 将文字转换为竖排显示
								return params.name.split('').join('\n');
							},
							color: '#ffffff',
							fontSize: 13,
							fontWeight: 'bold',
							backgroundColor: 'rgba(0, 30, 60, 0.8)',
							borderColor: '#00ffff',
							borderWidth: 1,
							borderRadius: 4,
							padding: [6, 6],  // 调整内边距适应竖排布局
							shadowColor: '#00ffff',
							shadowBlur: 10,
							lineHeight: 16  // 添加行高控制字符间距
						},
						emphasis: {
							scale: 1.3,
							itemStyle: {
								shadowBlur: 35
							}
						}
					},
					// 所有点的图片标记
					// {
					// 	type: 'scatter',
					// 	coordinateSystem: 'geo',
					// 	data: this.companiesData.map(item => ({
					// 		name: item.name,
					// 		value: item.coord.concat([0])
					// 	})),
					// 	symbol: 'image://' + this.iconMapPath,
					// 	symbolSize: [50, 140],
					// 	symbolOffset: [0, -50], // 向下偏移70像素，使图片底部与节点重合
					// 	itemStyle: {
					// 		opacity: 1
					// 	},
					// 	silent: true,
					// 	zlevel: 3
					// },
					// 带光点动画的飞线效果
					{
						type: 'lines',
						coordinateSystem: 'geo',
						data: lines,
						large: false,
						silent: true,  // 禁用飞线的交互事件
						effect: {
							show: true,  // 启用光点动画
							constantSpeed: 40,
							symbol: 'circle',
							symbolSize: 12,
							trailLength: 0.6,
							color: '#ffffff',
							shadowColor: '#00ffff',
							shadowBlur: 10
						},
						lineStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{offset: 0, color: 'rgba(255, 255, 255, 0)'},
								{offset: 0.3, color: 'rgba(0, 255, 255, 0.8)'},
								{offset: 0.7, color: 'rgba(255, 255, 255, 0.9)'},
								{offset: 1, color: 'rgba(0, 255, 255, 0)'}
							]),
							width: 3,
							curveness: 0.3,
							shadowColor: '#00ffff',
							shadowBlur: 8
						}
					}
				]
			};
			
			this.chart.setOption(option);
			
			// 不再需要动画循环
			
			// 启动自动tooltip循环（延迟启动，让用户先看到整体地图）
			setTimeout(() => {
				this.startAutoTooltip();
			}, 2000);
			
			// 添加鼠标事件监听，处理与自动tooltip的交互
			this.chart.on('mouseover', 'series.effectScatter', (params) => {
				// 当用户手动悬停时，暂停自动循环
				if (params.seriesIndex === 1) { // 只处理主要节点系列
					this.isUserHovering = true;
				}
			});
			
			this.chart.on('mouseout', 'series.effectScatter', (params) => {
				// 当鼠标离开时，恢复自动循环
				if (params.seriesIndex === 1) { // 只处理主要节点系列
					this.isUserHovering = false;
				}
			});
			
			// 窗口大小变化时重新渲染
			window.addEventListener('resize', () => {
				this.chart && this.chart.resize();
			});
		},
		generateLines() {
			const center = this.companiesData.find(item => item.isCenter);
			const others = this.companiesData.filter(item => !item.isCenter);
			
			return others.map(company => ({
				coords: [center.coord, company.coord]
			}));
		},
		
		// 启动自动tooltip循环
		startAutoTooltip() {
			if (this.isAutoTooltipRunning || !this.chart || this.companiesData.length === 0) {
				return;
			}
			
			this.isAutoTooltipRunning = true;
			this.currentTooltipIndex = 0;
			
			const showNextTooltip = () => {
				// 如果用户正在悬停，跳过这次显示
				if (this.isUserHovering) {
					return;
				}
				
				// 隐藏当前tooltip
				this.hideCurrentTooltip();
				
				// 显示下一个tooltip
				setTimeout(() => {
					if (this.isAutoTooltipRunning && !this.isUserHovering) {
						this.showTooltipForIndex(this.currentTooltipIndex);
						
						// 移动到下一个索引
						this.currentTooltipIndex = (this.currentTooltipIndex + 1) % this.companiesData.length;
					}
				}, 200); // 短暂延迟确保tooltip切换平滑
			};
			
			// 立即显示第一个tooltip
			showNextTooltip();
			
			// 设置定时器，每3秒切换一次
			this.autoTooltipTimer = setInterval(showNextTooltip, 3000);
		},
		
		// 停止自动tooltip循环
		stopAutoTooltip() {
			if (this.autoTooltipTimer) {
				clearInterval(this.autoTooltipTimer);
				this.autoTooltipTimer = null;
			}
			this.isAutoTooltipRunning = false;
			this.hideCurrentTooltip();
		},
		
		// 显示指定索引的tooltip
		showTooltipForIndex(index) {
			if (!this.chart || !this.companiesData[index]) {
				return;
			}
			
			// 触发显示tooltip
			this.chart.dispatchAction({
				type: 'showTip',
				seriesIndex: 1, // 主要节点系列的索引
				dataIndex: index
			});
		},
		
		// 隐藏当前tooltip
		hideCurrentTooltip() {
			if (this.chart) {
				this.chart.dispatchAction({
					type: 'hideTip'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page1-centet {
	width: 100%;
    height: 728px;
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('../../images/mapFinished.svg') no-repeat center center;
		background-size: contain;
		// opacity: 0.4;
		filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.6));
		z-index: 1;
	}
	
	.echart-show {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
	}
	
	.data-panel {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 320px;
		background: linear-gradient(135deg, rgba(0, 30, 60, 0.95) 0%, rgba(0, 50, 80, 0.9) 100%);
		border: 2px solid #00ffff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 
			0 0 25px rgba(0, 255, 255, 0.6),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		z-index: 3;
		
		&::before {
			content: '';
			position: absolute;
			top: -1px;
			left: -1px;
			right: -1px;
			bottom: -1px;
			background: linear-gradient(45deg, #00ffff, #0099cc, #00ffff);
			border-radius: 12px;
			z-index: -1;
			opacity: 0.3;
		}
		
		.company-info {
			.company-name {
				background: linear-gradient(90deg, #00ffff, #66ccff, #00ffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				font-size: 20px;
				font-weight: bold;
				text-align: center;
				margin-bottom: 20px;
				padding: 10px;
				border-bottom: 2px solid rgba(0, 255, 255, 0.4);
				text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
			}
			
			.data-list {
				.data-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12px;
					padding: 10px 0;
					border-bottom: 1px solid rgba(0, 255, 255, 0.15);
					transition: all 0.3s ease;
					
					&:hover {
						background: rgba(0, 255, 255, 0.05);
						padding-left: 5px;
						border-left: 3px solid #00ffff;
					}
					
					&:last-child {
						border-bottom: none;
						margin-bottom: 0;
					}
					
					.label {
						color: #ffffff;
						font-size: 15px;
						flex: 1;
						font-weight: 500;
					}
					
					.value {
						color: #00ffff;
						font-size: 18px;
						font-weight: bold;
						text-shadow: 0 0 8px #00ffff;
						margin-right: 8px;
						animation: valueGlow 2s ease-in-out infinite alternate;
					}
					
					.unit {
						color: #99ccff;
						font-size: 13px;
						min-width: 35px;
						text-align: right;
						font-weight: 500;
					}
				}
			}
		}
	}
}

// 添加发光动画
@keyframes glow {
	0%, 100% {
		box-shadow: 
			0 0 25px rgba(0, 255, 255, 0.6),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}
	50% {
		box-shadow: 
			0 0 35px rgba(0, 255, 255, 0.9),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
}

@keyframes valueGlow {
	0% {
		text-shadow: 0 0 8px #00ffff;
	}
	100% {
		text-shadow: 0 0 15px #00ffff, 0 0 25px rgba(0, 255, 255, 0.5);
	}
}

.data-panel {
	animation: glow 4s ease-in-out infinite;
}
</style>